/*
    Document   : styles
    Created on : 25/03/2013, 19:59:45
    Author     : elias
    Description:
        Purpose of the stylesheet follows.
*/

* {
    margin: 0;
    padding: 0;
    outline: none;
}

body {
    background: url(../images/fondo.jpg) repeat scroll 0 0 transparent;
}

@font-face {
    font-family: Brush Script Std;
    src: url('../fonts/BrushScriptStd.ttf');
    font-weight: normal;
    font-style: normal;
}

a{
    text-decoration: none;
    color: white;
    font-family: Verdana, sans-serif;
}

a[href]:hover{
    color: #404041;
}

.cargando{
    background-color: #F2F2F2;
    border: 2px solid;
    border-radius: 10px 10px 10px 10px;
    color: grey;
    height: 150px;
    margin: 100px auto;
    padding-top: 100px;
    text-align: center;
    width: 400px;
    font-family: verdana;
    font-weight: bold;
}

.page {
    /*display: none;*/
    visibility: hidden;
    margin: 0 auto;
    position: relative;
    width: 968px;
}


.container {
    display: inline-block;
    position: relative;
    width: 968px;
    margin-top: 30px;
    padding-bottom: 30px;
}

.footer{
    height: 60px;
}


h2.titulo {
    color: white;
    font-family: Brush Script Std;
    font-size: 60px;
    font-weight: 100;
    margin: 0 0 20px 40px;
    text-shadow: 1px 2px 1px black;
}




.logo-titulo {
    background: url("../images/logo.png") no-repeat scroll center center transparent;
    background-size: 100%;
    display: block;
    float: right;
    height: 80px;
    margin-right: 30px;
    width: 210px;
}

.MenuPrincipal{
    background: url(../images/fondo-menu.png);

    border: 2px solid #292929;
    border-radius: 15px 15px 15px 15px;

    position: relative;
    padding: 0 15px 15px 15px;;
    height: 25px;
    z-index: 110;
}

.menu {
    margin: 0;
    padding: 0;
    list-style: none;

}

.menu .menu-item {
    position: relative;
    display: block;
    float:left;
    text-align: center;
    /*width: 130px;*/
    z-index: 112;
}

.menu .menu-item>a{
    display: block;
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 16px;
    float: left;
    line-height: 40px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    z-index: 113;
    height: 40px;

}

.back{
    background-color: #4C4C4C;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 0 0 3px black inset;
    height: 25px;
    position: absolute;
    top: 9px;
    z-index: 111;

}

.menu-item span {
    background: url(../images/flechita.png) no-repeat center transparent;
    display: block;
    float: right;
    width: 15px;
}

.menu>li{

}

.menu .sub-menu{
    background-color: gray;
    border: 2px solid #292929;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 10px 10px 10px;
    display: none;
    position: absolute;
    width: 160px;
}

.menu .sub-menu li{

    float: none;
    text-align: left;
    width: 150px;

}



/*.menu li:hover>ul{
    display: block;
}*/
.menu .sub-menu li a{
    border-radius: 5px 5px 5px 5px;
    width: 140px;
    padding: 0 10px;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 20px;
    text-align: left;
    display: block;
    height: 20px;
}

.menu .sub-menu li:hover>a{
    background-color: antiquewhite;
    color: #555555;
}

.menu .sub-menu .sub{
    left: 140px;
    position: absolute;
    width: 130px;
    display: none;
}


/* BOTONES REDES SOCIALES*/
.redes-sociales{
    float: right;
    position: relative;
    top: 5px;
}

.redes-sociales div{
    float: left;
    width: 30px;
    height: 30px;
}

.redes-sociales div a{
    display: block;
    width: 30px;
    height: 30px;
}

.yt{
    background: url(../images/yt-icon.png) no-repeat center transparent;
}
.yt:hover{
    background: url(../images/yt-icon-hover.png) no-repeat center transparent;
}
.yt .load-img{
    background: url(../images/yt-icon-hover.png) no-repeat center transparent;
    width: 0;
    height: 0;
}

.tw{
    background: url(../images/twitter-icon.png) no-repeat center transparent;
}
.tw:hover{
    background: url(../images/twitter-icon-hover.png) no-repeat center transparent;
}
.tw .load-img{
    background: url(../images/twitter-icon-hover.png) no-repeat center transparent;
    width: 0;
    height: 0;
}

.fb{
    background: url(../images/facebook-icon.png) no-repeat center transparent;
}
.fb:hover{
    background: url(../images/facebook-icon-hover.png) no-repeat center transparent;
}
.fb .load-img{
    background: url(../images/facebook-icon-hover.png) no-repeat center transparent;
    width: 0;
    height: 0;
}

/* FIN BOTONES REDES SOCIALES*/

/* FIN FOOTER*/


.viewport {
    width: 95%;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
}
.scrollbar{
    position: relative;
    background-position: 0 0;
    float: right;
    width: 15px;
}
.track {
    background: url(../images/scroll-bar.png) no-repeat scroll center / 5px 100% transparent;
    height: 100%;
    width:13px;
    position: relative;
    padding: 0 1px;
}
.thumb {
    background: url(../images/scroll.png) no-repeat scroll center center / 70% auto transparent;
    height: 60px;
    width: 25px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: -5px;
}




.nombre {
    color: white;
    font-family: Brush Script Std;
    font-size: 36px;
    position: absolute;
    text-shadow: 1px 2px 1px black;
    display: none;
}

.logo .nombre, .televisor .nombre, .agenda .nombre, .discos .nombre{
    /*display: block;*/
}



.logo,.televisor,.puchi,.sergio,.marcelo,.chino,.agenda,.discos {
    display: block;
    position: absolute;

}
.logo {
    left: 210px;
    top: 10px;
    z-index: 100;

}

/*.logo:hover{
    left: 200px;
    top: 0px;
}*/

.logo .selector {
    background: url(../images/logo.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
    height: 134px;
    width: 340px;
    z-index: 100;
    display: block;
    position: absolute;
}

.logo .load-img{
    background: url(../images/logo-hover.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
}


.logo .nombre {
    left: 160px;
    top: 132px;
    width: 260px;
}

.televisor {
    right: 145px;
    top: 20px;
    z-index: 100;
}
.televisor .selector{
    background: url(../images/tele.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
    display: block;
    height: 129px;
    width: 150px;
}
/*.televisor .selector:hover{
    background: url(../images/tele-hover.png) no-repeat scroll center 100% / 100% auto transparent;
    height: 149px;
    width: 170px;
}*/

.televisor .load-img{
    background: url(../images/tele-hover.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
}

.agenda {
    bottom: 24px;
    left: 546px;
    z-index: 100;
}

.agenda .selector{
    background: url(../images/agenda.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
    display: block;
    height: 90px;
    width: 100px;
}

/*.agenda .selector:hover {
    background: url(../images/agenda-hover.png) no-repeat scroll center 100% / 100% auto transparent;
    height: 110px;
    width: 120px;

}*/

.agenda .load-img{
    background: url(../images/agenda-hover.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
}

.agenda .nombre {
    left: 130px;
    top: 35px;
}

.discos{
    bottom: 9px;
    left: 105px;
    z-index: 100;
}

.discos .selector {
    background: url(../images/disco.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
    display: block;
    height: 65px;
    width: 125px;
}

/*.discos .selector:hover {
    background: url(../images/disco-hover.png) no-repeat scroll center 100% / 100% auto transparent;
    height: 85px;
    width: 145px;
}*/

.discos .load-img{
    background: url(../images/disco-hover.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
}

.discos .nombre {
    left: 150px;
    top: 25px;
}




.puchi {
    /*background: url(../images/puchi.png) no-repeat scroll center 100% / 100% auto transparent;*/
    height: 534px;
    left: 100px;
    top: 107px;
    width: 326px;
}

.puchi .selector{
    display: block;
    height: 530px;
    position: absolute;
    width: 190px;
}

.puchi .nombre {
    left: 375px;
    top: 60px;
}

.puchi .load-img{
    background: url(../images/puchi.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
}

.chino {
    /*background: url(../images/chino.png) no-repeat scroll center 100% / 100% auto transparent;*/
    height: 296px;
    left: 288px;
    top: 102px;
    width: 368px;

}

.chino .selector{
    display: block;
    height: 200px;
    margin-left: 120px;
    margin-top: 8px;
    width: 200px;
    position: absolute;
}

.chino .nombre {
    left: 300px;
    top: 315px;
}

.chino .load-img{
    background: url(../images/chino.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
}

.marcelo {
    /*background: url(../images/marcelo.png) no-repeat scroll center 100% / 100% auto transparent;*/
    height: 509px;
    right: 47px;
    top: 129px;
    width: 363px;
}

.marcelo .selector{
    display: block;
    height: 450px;
    margin-left: 40px;
    margin-top: 22px;
    width: 244px;
    position: absolute;
}

.marcelo .nombre {
    left: -300px;
    top: 50px;
}

.marcelo .load-img{
    background: url(../images/marcelo.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
}

.sergio {
    /*background: url(../images/sergio.png) no-repeat scroll center 100% / 100% auto transparent;*/
    bottom: 9px;
    height: 416px;
    left: 292px;
    width: 279px;
}

.sergio .selector{
    display: block;
    height: 385px;
    margin-top: 30px;
    position: absolute;
    width: 250px;
}

.sergio .nombre {
    left: 140px;
    top: -230px;
}

.sergio .load-img{
    background: url(../images/sergio.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
}

/* HISTORIA */
.logo-historia{
    background: url(../images/logo.png) no-repeat scroll center 100% transparent;
    background-size: 100% auto;
    display: block;
    height: 134px;
    left: 360px;
    position: absolute;
    top: 400px;
    width: 340px;
    z-index: 100;
}
.cuerpo-historia {
        display: inline-block;
    margin-top: 560px;
}

.cuerpo-historia h2 {
    color: white;
    float: left;
    font-family: Brush Script Std;
    font-size: 60px;
    font-weight: 100;
    text-shadow: 1px 2px 1px black;
}

.cuerpo-historia .historia {
    color: white;
    font-family: arial,sans-serif;
    font-size: 18px;
    margin: 20px 0 10px 230px;
    padding-right: 20px;
    width: 710px;
}

.cuerpo-historia .viewport {
    height: 400px;
    overflow: hidden;
    position: relative;
    width: 95%;
}

/* FIN HISTORIA */

/* BIOGRAFIA */



.cuerpo-bio {
    display: block;
    position: relative;

}


.logo-bio {
    background: url("../images/logo.png") no-repeat scroll center 100% transparent;
    background-size: 100% auto;
    display: block;
    height: 134px;
    left: 575px;
    position: absolute;
    top: 615px;
    width: 340px;
    z-index: 100;
}

.cuerpo-bio .artista {
    height: 700px;
    position: absolute;
    width: 440px;
}

.cuerpo-bio .biografia {
    background: url(../images/bio-fondo.png) no-repeat scroll center center transparent;
    background-size: 100%;
    height: 700px;
    position: absolute;
    right: 25px;
    width: 510px;
}

.cuerpo-bio .viewport {
    height: 545px;
    margin: 40px;
    width: 80%;
}

.cuerpo-bio .thumb {
    height: 60px;
    width: 25px;
}

.cuerpo-bio .overview{
    color: white;
    font-family: arial,sans-serif;
    font-size: 16px;
    line-height: 25px;
}

.cuerpo-bio .scrollbar{
    height: 545px;
    right: 15px;
    top: 50px;
}


/* FIN BIOGRAFIA */

/* RIDER */

.cuerpo-rider {
    display: inline-block;
    margin-top: 580px;
}

.cuerpo-rider h2 {
    color: white;
    float: left;
    font-family: Brush Script Std;
    font-size: 60px;
    font-weight: 100;
    text-shadow: 1px 2px 1px black;
}
.cuerpo-rider .rider {
    color: white;
    font-family: arial,sans-serif;
    font-size: 18px;
    margin: 20px 0 10px 160px;
    padding-right: 20px;
    width: 770px;
}
/* FIN RIDER */

/* RADIOS */

.titulo-radio {
    color: white;
    font-family: Brush Script Std;
    font-size: 60px;
    font-weight: 100;
    margin-left: 40px;
    text-shadow: 1px 2px 1px black;
}

.cuerpo-radios .radios {
    background: url("../images/emp-fondo.png") repeat-x scroll 0 0 transparent;
    border: 2px solid white;
    border-radius: 15px 15px 15px 15px;
    display: inline-block;
    margin: 25px;
    padding: 25px 60px 40px;
    width: 800px;
}

.cuerpo-radios .radios .radio {
    background-color: #FFFFFF;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 0 0 6px grey;
    float: left;
    font-family: arial;
    font-size: 12px;
    height: 280px;
    margin: 7px;
    overflow: hidden;
    padding: 10px;
    width: 230px;
}
.cuerpo-radios .radio .titulo{
    margin-bottom: 5px;
}
.cuerpo-radios .radio .titulo a{
    color: #404041;
    font-size: 14px;
    font-weight: bold;
}
.cuerpo-radios .radio .titulo a:hover{
    color: grey;
}
.cuerpo-radios .radio .imagen {
    background-color: white;
    box-shadow: 0 0 2px grey;
    height: 160px;
    text-align: center;
}
.cuerpo-radios .radio .imagen img {
    height: auto;
    max-height: 145px;
    max-width: 180px;
    position: relative;
    top: 50%;
    width: auto;
}
.cuerpo-radios .radio .resumen {
    background-color: #F2F2F2;
    font-size: 11px;
    height: 85px;
    margin-top: 1px;
    overflow: hidden;
    padding: 5px 10px;
}


/* FIN RADIOS */


/*    DISCOGRAFIA    */

.cuerpo-discos {
    color: white;
    font-family: arial;
    font-size: 18px;
}

.cuerpo-discos h2 {
    color: white;
    font-family: Brush Script Std;
    font-size: 60px;
    font-weight: 100;
    position: absolute;
    text-shadow: 1px 2px 1px black;
}


.cuerpo-discos h3 {
    margin-bottom: 15px;
}

.disco > img {
    float: left;
    height: 220px;
    margin-right: 50px;
}

.discografia {
    margin-left: 250px;
    margin-bottom: 40px;
}


.disco {
    display: inline-block;
    margin: 0 0 80px;
    width: 700px;
}


/*    FIN DISCOGRAFIA    */

/*    LETRAS    */

.cuerpo-letra h2.titulo{
    color: white;
    font-family: Brush Script Std;
    font-size: 60px;
    font-weight: 100;
    margin-left: 40px;
    text-shadow: 1px 2px 1px black;
}

.cuerpo-letra .letra {
    background: url("../images/bio-fondo.png") no-repeat scroll center center transparent;
    background-size: 100%;
    float: left;
    height: 600px;
    position: relative;
    width: 460px;
}

.cuerpo-letra .logo-letra{
    float: right;
    margin-right: 30px;
    margin-top: 40px;
    position: relative;
}

.cuerpo-letra .logo-letra img {
    width: 390px;

}

.cuerpo-letra .logo-letra img:hover{
    background: url("../images/logo-hover.png") no-repeat scroll center center / 101% 101% transparent;
}

.cuerpo-letra .reproductor {
    display: block;
    float: right;
    margin-bottom: 50px;
    margin-right: 20px;
    margin-top: 90px;
    position: relative;
    width: 460px;
}

.cuerpo-letra .viewport {
    height: 500px;
    margin: 40px;
    width: 80%;
}

.cuerpo-letra .thumb {
    height: 60px;
    width: 25px;
}

.cuerpo-letra .overview{
    color: white;
    font-family: arial,sans-serif;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    width: 100%;
}

.cuerpo-letra .overview h2{
    font-size: 20px;
    margin-bottom: 20px;
}

.cuerpo-letra .overview p{
    margin-bottom: 20px;
}

.cuerpo-letra .scrollbar{
    height: 500px;
    right: 15px;
    top: 50px;
}

/*    FIN LETRAS    */

/*    BLOG   */



.cuerpo-blog, .cuerpo-fotos, .cuerpo-videos {
    background-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px black inset;
    display: inline-block;
    float: right;
    font-family: Verdana,sans-serif;
    font-size: 12px;
    margin-right: 25px;
    padding: 25px;
    width: 600px;
}

.categorias {
    background-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px black inset;
    display: inline-block;
    margin-left: 20px;
    padding: 15px;
    width: 235px;
}

.categorias h3 a{
    font-family: Verdana, sans-serif;
    font-size: 14px;
    color: #404041;
}

.categorias h3 a:hover{
    color: grey;
}

.categorias > ul {
    list-style-type: none;
    margin-bottom: 30px;
}

.categorias ul li{

}

.categorias ul li a{
    color: black;
    font-size: 12px;
}

.categorias ul li a:hover{
    color: grey;
}


.post-title {
    margin-bottom: 20px;

}

.post-title a{
    color: #404041;
}

.post-title a:hover{
    color: #8E8E8E;
}

.post-imagen {
    background-color: white;
    box-shadow: 0 0 3px grey;
    margin-bottom: 20px;
    text-align: center;
}

.post-resumen {
    margin-bottom: 20px;
}

.post-resumen a{
    color: #404041;
}

.post-resumen a:hover{
    color: #8E8E8E;
}

.post-meta {
    color: #A0A0A0;
    font-size: 11px;
    font-style: oblique;
    margin-bottom: 5px;
}


/*    FIN BLOG   */


/*    FOTOS Y VIDEOS   */
.fotos-videos .logo {
    background: url("../images/logo.png") no-repeat scroll center center transparent;
    background-size: 100%;
    height: 153px;
    margin-left: -100px;
    margin-top: 35px;
    width: 300px;
}

.fotos-videos .tv {
    background: url("../images/tv.png") no-repeat scroll center center transparent;
    background-size: 100%;
    height: 400px;
    left: 50%;
    margin-left: -210px;
    margin-top: 90px;
    position: relative;
    width: 420px;
}
.fotos-videos .tv .links {
    bottom: 35px;
    left: 65px;
    position: absolute;
}

.fotos-videos .tv .links a{
    color: white;
    font-family: Brush Script Std;
    font-size: 60px;
    font-weight: 100;
    margin: 5px 0 20px 40px;
    text-shadow: 1px 2px 1px black;
}

.fotos-videos .tv .links a:hover{
    color: #848484;
}
/*    FIN FOTOS Y VIDEOS   */


/**/
.cuerpo-fotos .albums {
    float: left;
    margin: 3px 3px 3px 60px;
}

.cuerpo-fotos .albums a {
    color: #404041;
    font-size: 12px;
    font-weight: bold;
}

.cuerpo-fotos .fotos-imagen img {
    height: 170px;
    width: 200px;
}


.fotos-imagen {
    box-shadow: 0 0 2px black;
    margin: 10px 0;
    padding: 8px;
}



/* COMENTARIOS */

.comentarios {
    background-color: #E2E2E2;
    border-radius: 10px 10px 10px 10px;
    padding: 15px;
}

#commentform p a {
    color: grey;
}


#respond > h3 {
    margin: 10px 0;
}

#respond a[href] {
    color: grey;
}

#respond a[href]:hover {
    color: white;
}

#commentform > p {
    margin: 5px 0;
}


#commentform input[type="submit"] {
    background-color: #F5F5F5;
    border: medium none;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px black;
    padding: 5px 25px;
}

#commentform input[type="submit"]:hover{
    background-color: grey;
    cursor: pointer;
    color: white;
}


ol.commentlist {
    margin: 20px;
}

ol.commentlist li {
    border-bottom: 1px dotted grey;
    margin-bottom: 15px;
}

ol.commentlist ul.children {
    list-style: none outside none;
    margin: 10px 10px 10px 30px;
}

ol.commentlist a[href]{
    color: grey;
}

ol.commentlist .comment-body p{
    margin: 10px 0;
}

ol.commentlist a[href]:hover{
    color: white;
}
/* FIN COMENTARIOS */

/* AGENDA  */

.cuerpo-agenda {
    margin-top: 360px;
}

.cuerpo-agenda h2 {
    color: white;
    font-family: Brush Script Std;
    font-size: 60px;
    font-weight: 100;
    text-shadow: 1px 2px 1px black;
}

.cuerpo-agenda .texto {
    color: white;
    font-family: Arial;
    font-weight: bold;
    padding: 10px;
}

.cuerpo-agenda table {
    background-color: #F1F1F1;
    border-collapse: collapse;
    color: #000000;
    font-family: Arial;
    font-size: 14px;
    text-align: center;
    width: 97%;
}
.cuerpo-agenda th {
    background-color: #404041;
    color: white;
    padding: 10px 0;
}
.cuerpo-agenda td {
    padding: 5px 0;
}

.cuerpo-agenda td a{
    color: grey;
}
.cuerpo-agenda td a:hover{
    color: blue;
}
/* FIN AGENDA*/

/* CONTACTO  */
.cuerpo-contacto {
    background-color: #FFFFFF;
    border: 2px solid grey;
    border-radius: 10px 10px 10px 10px;
    font-family: Arial,Sans-serif;
    font-size: 14px;
    margin-left: 100px;
    padding: 10px 40px 20px;
    width: 700px;
}

h2.titulo-contacto {
    color: white;
    font-family: Brush Script Std;
    font-size: 60px;
    font-weight: 100;
    margin-left: 130px;
}

.cuerpo-contacto table {
    font-size: 14px;
    margin-left: 130px;
    margin-top: 20px;
}

.cuerpo-contacto input, .cuerpo-contacto textarea {
    border: 2px solid gray;
    border-radius: 5px 5px 5px 5px;
    height: 25px;
    margin-bottom: 5px;
    padding: 0 10px;
    font-family: Arial,Sans-serif;
    font-size: 14px;
}
.cuerpo-contacto textarea {
    padding: 10px;
    height: 150px;
}

.wpcf7-form > p {
    margin-left: 420px;
}

.wpcf7-form-control.wpcf7-submit {
    background-color: #C3C3C3;
    border: 1px solid grey;
    box-shadow: 0 0 1px grey inset;
    color: #FFFFFF;
    cursor: pointer;
    height: 30px;
    font-weight: bold;
    padding: 0 20px;
}
.wpcf7-form-control.wpcf7-submit:hover{
    background-color: #000000;
}
/* FIN CONTACTO  */

